import React, {Component} from "react"
import { PullToRefresh, ListView, Button } from 'antd-mobile';
import ReactDOM from 'react-dom'
import './shudan.scss'
import {Link} from  'react-router-dom'
const data = [
    {

        "bid" : "7004875",
        "bookname" : "缠绵不休：隐婚萌妻要乖乖",
        "introduction" : "遭遇未婚夫背叛，她伤心至极。随手拉过一个路人做挡箭牌，却莫名招惹上了他――魔鬼般尊贵的男子。他是万人之上的帝国集团总裁，却让未婚夫叫了他一声“三叔”一夜迷情，他从此上了瘾。“你的心，你的人、从头到脚，连一根头发丝儿都是我的，谁碰了一下，那就不要命了。”男人拉过她，低声在她耳畔说道。",
        "book_info" : "遭遇未婚夫背叛，她伤心至极。随手拉过一个路人做挡箭牌，却莫名招惹上了他――魔鬼般尊贵的男子。他是万人之上的帝国集团总裁，却让未婚夫叫了他一声“三叔”一夜迷情，他从此上了瘾。“你的心，你的人、从头到脚，连一根头发丝儿都是我的，谁碰了一下，那就不要命了。”男人拉过她，低声在她耳畔说道。",
        "chapterid" : "809863",
        "topic" : "第573章你想让我怎么做",
        "topic_first" : "第1章你不觉得无耻吗",
        "date_updated" : 1523846993,
        "author" : "949506",
        "author_name" : "锦里",
        "top_class" : "502",
        "state" : "2",
        "readCount" : "0",
        "praiseCount" : "0",
        "stat_name" : "完结",
        "class" : "21",
        "class_name" : "现代言情",
        "size" : "1234636",
        "book_cover" : "http://img-tailor.11222.cn/bcv/big/201702151214121832.jpg",
        "chapterid_first" : "756903",
        "chargeMode" : "3",
        "digest" : "0",
        "price" : "0.5",
        "tag" : [
            "总裁",
            "现代",
            "言情"
        ],
        "is_new" : 1,
        "discountNum" : 10,
        "quick_price" : 0,
        "formats" : "1",
        "audiobook_playCount" : 0,
        "chapterNum" : "571",
        "isShortStory" : false,
        "userid" : "0",
        "search_heat" : 90,
        "num_click" : 636779,
        "recommend_num" : "55713",
        "first_cate_id" : "19",
        "first_cate_name" : "言情小说",
        "reason" : ""
    },
    {

        "bid" : "6720460",
        "bookname" : "太古狂魔",
        "introduction" : "一名身缠七彩恶龙、肩扛古老石棺的白发青年，仰望高高在上的诸天至尊、万古道祖，淡淡道：“诸位，我说我这石棺葬过天，你们信么？”",
        "book_info" : "一名身缠七彩恶龙、肩扛古老石棺的白发青年，仰望高高在上的诸天至尊、万古道祖，淡淡道：“诸位，我说我这石棺葬过天，你们信么？”",
        "chapterid" : "1041454",
        "topic" : "第一千二百五十七章死吧！",
        "topic_first" : "第一章秦宇",
        "date_updated" : 1525518902,
        "author" : "52467",
        "author_name" : "汉隶",
        "top_class" : "502",
        "state" : "1",
        "readCount" : "507",
        "praiseCount" : "10",
        "stat_name" : "连载",
        "class" : "2",
        "class_name" : "东方玄幻",
        "size" : "2890411",
        "book_cover" : "http://img-tailor.11222.cn/bcv/big/201607011010477093.jpg",
        "chapterid_first" : "712798",
        "chargeMode" : "3",
        "digest" : "0",
        "price" : "0.5",
        "tag" : [
            "玄幻",
            "东方",
            "无敌"
        ],
        "is_new" : 1,
        "discountNum" : 10,
        "quick_price" : 0,
        "formats" : "1",
        "audiobook_playCount" : 0,
        "chapterNum" : "1257",
        "isShortStory" : false,
        "userid" : "0",
        "search_heat" : 85,
        "num_click" : 1817105,
        "recommend_num" : "1737456",
        "first_cate_id" : "1",
        "first_cate_name" : "玄幻小说",
        "reason" : ""
    },
    {

        "bid" : "7363143",
        "bookname" : "99亿闪婚：豪门总裁夜夜忙",
        "introduction" : "她二十年一次脚下失足，撞了他的豪车，留下签名和号码，走的不带一片云彩。不仅如此，还顺便牵走他‘未婚妻’的名义……隔日，全球惊爆季氏总裁惊现未婚妻……所以，她宋倾城这次是闯大祸了？！不但如此，某男还给她直接甩了一份闪婚协议书。一年后，宋倾城将离婚协议拍在某男面前，“季先生，请签字！”“我有没有告诉过你我不会写三个字。”“哪三个字？”“季正霆。”“……”",
        "book_info" : "她二十年一次脚下失足，撞了他的豪车，留下签名和号码，走的不带一片云彩。不仅如此，还顺便牵走他‘未婚妻’的名义……隔日，全球惊爆季氏总裁惊现未婚妻……所以，她宋倾城这次是闯大祸了？！不但如此，某男还给她直接甩了一份闪婚协议书。一年后，宋倾城将离婚协议拍在某男面前，“季先生，请签字！”“我有没有告诉过你我不会写三个字。”“哪三个字？”“季正霆。”“……”",
        "chapterid" : "964351",
        "topic" : "第706章晚上有大战",
        "topic_first" : "第1章劈腿能不能先说一声？",
        "date_updated" : 1525522511,
        "author" : "1283790",
        "author_name" : "花木",
        "top_class" : "502",
        "state" : "1",
        "readCount" : "0",
        "praiseCount" : "0",
        "stat_name" : "连载",
        "class" : "21",
        "class_name" : "现代言情",
        "size" : "1439730",
        "book_cover" : "http://img-tailor.11222.cn/bcv/big/201709041733565942.jpg",
        "chapterid_first" : "844414",
        "chargeMode" : "3",
        "digest" : "0",
        "price" : "0.5",
        "tag" : [
            "霸道",
            "契约",
            "忠犬"
        ],
        "is_new" : 1,
        "discountNum" : 10,
        "quick_price" : 0,
        "formats" : "1",
        "audiobook_playCount" : 0,
        "chapterNum" : "706",
        "isShortStory" : false,
        "userid" : "0",
        "search_heat" : 91,
        "num_click" : 290022,
        "recommend_num" : "210373",
        "first_cate_id" : "19",
        "first_cate_name" : "言情小说",
        "reason" : ""
    },
];
const NUM_ROWS = 20;
let pageIndex = 0;

function genData(pIndex = 0) {
    const dataArr = [];
    for (let i = 0; i < NUM_ROWS; i++) {
        dataArr.push(`row - ${(pIndex * NUM_ROWS) + i}`);
    }
    return dataArr;
}

export  default class  extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });

        this.state = {
            dataSource,
            refreshing: true,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: false,
        };
    }


    componentDidUpdate() {
        if (this.state.useBodyScroll) {
            document.body.style.overflow = 'auto';
        } else {
            document.body.style.overflow = 'hidden';
        }
    }

    componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;

        setTimeout(() => {
            this.rData = genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(genData()),
                height: hei,
                refreshing: false,
                isLoading: false,
            });
        }, 1500);
    }

    onRefresh = () => {
        this.setState({ refreshing: true, isLoading: true });
        // simulate initial Ajax
        setTimeout(() => {
            this.rData = genData();
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                refreshing: false,
                isLoading: false,
            });
        }, 600);
    };

    onEndReached = (event) => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        console.log('reach end', event);
        this.setState({ isLoading: true });
        setTimeout(() => {
            this.rData = [...this.rData, ...genData(++pageIndex)];
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            });
        }, 1000);
    };

    render() {

        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: '#F5F5F9',
                    height: 8,
                    borderTop: '1px solid #ECECED',
                    borderBottom: '1px solid #ECECED',
                }}
            />
        );
        let index = data.length - 1;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = data.length - 1;
            }
            const obj = data[index--];
            return (
                <div key={rowID}
                     style={{
                         padding: '0 15px',
                         backgroundColor: 'white',
                     }}
                >
                    <div style={{ height: '50px', lineHeight: '50px', color: '#888', fontSize: '18px', borderBottom: '1px solid #ddd' }}>
                        {obj.title}
                    </div>
                    <div style={{ display: '-webkit-box', display: 'flex', padding: '15px' }}>
                        <img style={{ height: '120px', width: 'auto', marginRight: '15px' }} src={obj.book_cover} alt="" />
                        <div style={{ display: 'inline-block' }}>
                            <div style={{ marginBottom: '3px', color: '#000', fontSize: '16px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '250px' }}>{obj.bookname}</div>
                            <div style={{ fontSize: '16px' }}><span style={{ fontSize: '30px', color: '#FF6E27' }}></span>{obj.author_name} </div>
                            <div style={{ fontSize: '16px' }}><span style={{ fontSize: '30px', color: '#FF6E27' }}></span>{obj.class_name} </div>
                        </div>
                    </div>
                </div>
            );
        };
        return (
            <div className='shudan'>

            <div className='pullbox'>
                <header>
                    <Link to='/home' className='spans icon'>&#xe610;</Link>
                    <div>书单</div>
                    <Link to='/home' className='spans icon'>&#xe634;</Link>
                </header>
            <ListView
                key={this.state.useBodyScroll ? '0' : '1'}
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}


                renderRow={row}
                renderSeparator={separator}
                useBodyScroll={this.state.useBodyScroll}
                style={this.state.useBodyScroll ? {} : {
                    height: this.state.height,
                    border: '1px solid #ddd',
                    margin: '5px 0',
                }}
                pullToRefresh={<PullToRefresh
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh}
                />}
                onEndReached={this.onEndReached}
                pageSize={5}
            />
        </div>
            </div>);
    }
}


